<template>
  <div>
    <!-- top50 书籍列表 -->
    <div class="mid-songlist" v-for="item in songs" :key="item.id">
      <!-- 头部 -->
      <div class="mid-songlist-hd">
        <span class="mid-songlist-hd-title">{{ item.title }}</span>
        <a :href="item.url">全部</a>
      </div>
      <!-- 列表 -->
      <div class="mid-songlist-list">
        <ul>
          <li v-for="i in item.songList" :key="i.id">
            <img @click="playSong(i)" :src="i.pic" draggable="false" />
            <p @click="showIntroductionDialog(i)">
              {{ i.name }}
            </p>
            <p class="songlist_author">{{ i.artist }}</p>
            <p>￥{{ i.presentprice }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 简介 加入购物车  对话框-->
    <el-dialog
      title="简介"
      :visible.sync="introductionDialogVisible"
      width="30%"
      center
    >
      <span>{{ introduction }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="introductionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addShopCart">加入购物车</el-button>
      </span>
    </el-dialog>
    <!-- 最近播放 -->
    <div class="mid-songlist">
      <!-- 头部 -->
      <div class="mid-songlist-hd">
        <span class="mid-songlist-title">最近播放</span>
        <a href="">全部</a>
      </div>
      <!-- 最近播放列表 -->
      <div class="mid-songlist-recently-list">
        <p
          style="text-align:center; color:#7C8DB5; margin-top:60px"
          v-if="songListRec.length < 1"
        >
          你还没有听过哦~~
        </p>
        <ul>
          <li v-for="(item, index) in songListRec" :key="item.id">
            <span>{{ index + 1 }}</span>
            <img
              class="mid-songlist-recently-list-pic"
              :src="item.cover"
              alt=""
              draggable="false"
            />
            <div class="songinfo">
              <a>{{ item.name }}</a>
              <a>{{ item.artist }}</a>
            </div>
            <img
              class="btn-song"
              draggable="false"
              src="http://localhost:5500/img/indexImg/new.png"
              alt=""
            />
            <img
              class="btn-song"
              draggable="false"
              src="http://localhost:5500/img/indexImg/song.png"
              alt=""
            />
            <span class="songtime">{{ item.songTimeMinutes }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      songs: [],
      songListRec: [],
      // 简介 加入购物车  对话框 显隐
      introductionDialogVisible: false,
      // 书籍简介
      introduction: '',
      // 书籍id
      goodId: ''
    }
  },
  mounted: function() {
    $('.mid-songlist-recently-list').niceScroll({ cursorcolor: '#EBEEF5' })
    this.getSong()
  },
  methods: {
    // 加入购物车
    async addShopCart() {
      // console.log(i)
      const userId = sessionStorage.getItem('user_id')
      const { data: res } = await this.$http.post(
        'http://localhost:3000/api/users/shopcat/add',
        {
          user_id: userId,
          good_id: this.goodId,
          count: 1
        }
      )
      console.log(res)
      if (res.status !== true) {
        return this.$message.error('添加购物车失败')
      }
      this.$message.success('添加购物车成功')
      // 隐藏简介对话框
      this.introductionDialogVisible = false
    },

    // 点击展开简介对话框
    showIntroductionDialog(i) {
      this.introductionDialogVisible = true
      this.introduction = i.introduction
      this.goodId = i.id
      // console.log(i)
    },
    // 点击播放
    playSong: function(i) {
      // console.log(i)
      this.$emit('songObj', i)
    },
    // 获取书籍
    getSong: async function() {
      const songs = await this.$http.get('api/get_index_songs.php')
      // console.log(songs)
      // const songListRec = await this.$http.get('api/get_index_songs_rec.php')
      this.songs = songs.data
      // this.songListRec = songListRec.data.songListRec

      if (localStorage.getItem('recentPlayList')) {
        try {
          this.songListRec = JSON.parse(
            localStorage.getItem('recentPlayList')
          ).reverse()
        } catch (e) {
          localStorage.removeItem('recentPlayList')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mid-songlist {
  padding: 15px;
  margin: 20px 0;
  border: 1px rgba(68, 62, 62, 10%) solid;
  border-radius: 10px;

  .mid-songlist-hd {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
    color: #303e65;
    font-weight: 900;

    a {
      color: #8394b9;
    }
  }

  .mid-songlist-list {
    ul {
      display: flex;
      overflow: hidden;
      justify-content: space-around;
    }

    li {
      padding: 10px;
      width: 110px;
      cursor: pointer;
      font-size: 14px;
      border: 1px rgba(68, 62, 62, 10%) solid;
      border-radius: 5px;

      p:nth-child(4) {
        color: red;
        font-size: 16px;
        font-weight: 600;
      }

      img {
        height: 110px;
        width: 110px;
        border-radius: 10px;
      }

      .songlist_author {
        font-size: 12px;
        color: #8394b9;
      }
    }
  }

  .mid-songlist-recently-list {
    height: 120px;
    // overflow: hidden;
    overflow: scroll;
    li {
      height: 40px;
      margin-top: 20px;

      span {
        margin-right: 15px;
        float: left;
        line-height: 40px;
        font: 16px;
        color: #7c8db5;
        font-weight: 900;
      }

      .mid-songlist-recently-list-pic {
        margin-right: 20px;
        float: left;
        height: 40px;
        border-radius: 10px;
      }

      .songinfo {
        float: left;
        margin-right: 20px;

        a:nth-child(1) {
          display: block;
          line-height: 20px;
          color: #303e65;
        }

        a:nth-child(2) {
          display: block;
          line-height: 20px;
          font-size: 14px;
        }
      }

      .btn-song {
        margin-left: 10px;
        padding: 9px;
        float: right;
        height: 20px;
        width: 20px;
        border-radius: 10px;
        border: 1px rgba(68, 62, 62, 10%) solid;
      }

      .songtime {
        float: right;
      }
    }
  }
}
</style>
